class List{
    constructor(){
        this.init() //初始化页面，根据页面渲染商品列表
        this.ul=document.querySelector('.cakelist')
        this.div=document.querySelector('.minglu_nr')
    }

    async init(){
        // console.log()
        let sort=this.getSort(location.search)
        // console.log(sort) 
        //得到分类后发送请求，获取该分类的所有商品
        let goods=''
        if(sort!=='all'){
            let href='http://localhost:1998/all-goods?sort='+sort
            goods=await axios.get(href)
        }else{
            goods=await axios.get('http://localhost:1998/all-goods')
        }
        
        goods=goods.data 

        //渲染页面
        this.createPage(goods,sort)
        
    }

    //获取浏览器地址栏内的参数  ,获取分类
    getSort(data){
        var data = data.substr(1).split('&'); //把字符串分割为数组
	    for (var i = 0; i < data.length; i++) {
		// search=%E9%9E%8B  =前面参数名 以=分割 如果等号前面的和参数名一样 返回=号后面的参数的值
		if(data[i].split('=')[0]=="sort"){
			// 返回当前参数的值 同时转码
			return decodeURI(data[i].split('=')[1]);
		  }
	    }
    }

    //渲染页面
    createPage(goods,sort){
        console.log(goods) 

        let str=''
        goods.map(item=>{
            // console.log(item)
            str+=`<li>
            <div class="cake_pic">
                <a href=""><img src="${item.img.detailimg1}" alt="" width="200" height="200"></a>
            </div>
            <div class="cake_xq">
                <h2><a href="">${item.title}</a></h2>
               
            </div>
            <div class="cake_price" style="line-height: 143px; ">  ￥${item.price}</div>
            <div class="cake_bt">
                <div class="btn1">
                    <a href="http://localhost:4023/html/product.html?id=${item.id}"></a>
                     <!--  跳转到详情页面并传入参数Id（商品编号） -->
                </div>
                <!-- <div class="btn2">
                    <a href=""></a>
                </div> -->
            </div>
        </li>`
        })
        this.ul.innerHTML=str
       if(sort!=='all') {     
             let li=document.createElement('li')
             li.innerHTML=sort
             this.div.appendChild(li)
       }
    }
}


new List()